<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/moment/moment.js"></script>

    <style>
    
        table,td,th{
            border: 1px solid #000;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <myform @noticefather="getNotice" @keywordchange="getKeyWord"></myform>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Index</th>
                    <th>Brand Name</th>
                    <th>Create Time</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search" :key="index">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dateformat("YYYY赵MM春DD明 HH:mm:ss")}}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(item._id)">删除</button>
                    </td>
                </tr> 
                
            </tbody>
        </table>
    </div>

    <script>

        Vue.filter("dateformat", function(value, pattern){
            //将value字符串进行日期格式化之后返回结果
            return moment(value).format(pattern);
        })

        Vue.component("myform", {
            template: `
            <div>
            <label class="sr-only">请输入品牌名称</label>
            <input type="text" @keyup.enter="add" v-model="brandName" class="form-control"  placeholder="品牌名称">

            <button class="btn btn-default" @click.prevent="add">添加</button>
            <br>
            <br>
            <label class="sr-only">请输入搜索关键字</label>
            <input type="text" class="form-control" placeholder="搜索关键字" v-model="keyword">
            </div>
            `,
            data(){
                return {
                    brandName: "",
                    keyword: ""
                }
            },
            methods: {
                add(){
                    // 1. 获取用户输入的品牌名称
                    // 2. 发送ajax请求将数据添加到数据库中
                    if(this.brandName.trim() == ""){
                        alert("请输入品牌名称");
                        return;
                    }
                    axios({
                        url: "http://localhost:9999/api/addproduct",
                        method: "post",
                        data: {name: this.brandName}
                    }).then(res => {
                        this.brandName = "";
                        //添加成功之后，告诉父组件
                        this.$emit("noticefather")
                    })
                }
            },
            watch: {
                keyword(nv, ov){
                    // 需要通知父组件，keyword发生了变化
                    // 还需要将发生变化的keyword传递给父组件
                    this.$emit("keywordchange", nv);
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                brandList: [],
                keyword: ""
            },
            methods: {
                getData(){
                    //1. 发送ajax请求，获取列表数据
                    axios({
                        url: "http://localhost:9999/api/getprodlist"
                    }).then(res => {
                        this.brandList = res.data.data;
                    })
                },
                // 当子组件中添加数据完成，就会通知父组件
                getNotice(){
                    //父组件在接收到通知之后需要刷新列表
                    this.getData();
                },
                getKeyWord(keyword){
                    // 如果子组件中keyword变化，子组件会通过触发事件调用这个函数
                    // 我们可以在这个函数中获取 子组件中变化了的keyword
                    // console.log(keyword);
                    this.keyword = keyword;
                }
            },
            created(){
                this.getData();
            },
            computed:{
                search(){
                    return this.brandList.filter((v, i) => 
                         v.name.indexOf(this.keyword) !== -1
                    )
                }
            }
        })


















        



        // // 1. 页面刚加载的时候，页面中就需要显示列表数据
        //     // 我们需要在created中发送ajax请求获取接口数据
        //     // 将接口的返回的数据展示到页面中


        // //1. 创建vue对象
        // var vm = new Vue({
        //     el: "#app",
        //     data: {
        //         brandName: "",
        //         brandsList: [],
        //         keyword: ""
        //     },
        //     methods: {
        //         add: function () {
        //             // 1. 获取用户输入的品牌名称
        //             // 2. 发送ajax请求将数据添加到数据库中
        //             if(this.brandName.trim() == ""){
        //                 alert("请输入品牌名称");
        //                 return;
        //             }
        //             axios({
        //                 url: "http://localhost:9999/api/addproduct",
        //                 method: "post",
        //                 data: {name: this.brandName}
        //             }).then(res => {
        //                 //3. 添加数据成功之后
        //                 // 重新渲染一次列表
        //                 this.getData();

        //                 this.brandName = "";
        //             })
        //         },
        //         del: function(id){
                    
        //             //1. 发送ajax请求删除数据
        //             axios({
        //                 url: "http://localhost:9999/api/delproduct/" + id
        //             }).then(res => {
        //                 if(res.data.errCode == 200){
        //                     //2. 删除数据成功之后，重新渲染列表
        //                     this.getData();
        //                 }
        //             })
        //         },
        //         //获取列表数据的功能封装
        //         getData(){
        //             //1. 发送ajax请求，获取列表数据
        //             axios({
        //                 url: "http://localhost:9999/api/getprodlist"
        //             }).then(res => {
        //                 // console.log(res);
        //                 // 后台返回的数据展示到页面里面去
        //                 this.brandsList = res.data.data;
        //             })
        //         }
        //     },
        //     computed: {
        //         search: function(){
        //             // var that = this;
        //             // var result = this.brandsList.filter(function(v, i){
        //             //     return v.name.indexOf(that.keyword) != -1;
        //             // })

        //             var result = this.brandsList.filter((v, i) => 
        //                  v.name.indexOf(this.keyword) !== -1
        //             );

        //             return result;
        //         }
        //     },
        //     created(){
        //         this.getData();
        //     }
        // })



    </script>
</body>

</html>